<template>
  <div v-if="pageflag" class="middle">
    <el-table
      class="mb-20"
      :data="tableData"
      v-loading="loading"
      :header-cell-style="tableHeaderCellStyle"
      :row-style="rowStyle"
      :cell-style="tableCellStyle"
      @row-click="rowClick"
      style="width: 100%"
    >
      <el-table-column
        prop="paramName"
        label="传感器"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="gatewayCount" label="在线状态" width="180">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.onlineStatus === 0"
            type="text"
            style="color: #fb4a4a"
            ><SvgIcon
              style="margin-right: 5px; margin-left: 4px"
              name="offline"
            ></SvgIcon
            >离线</el-button
          >
          <el-button
            v-else-if="scope.row.onlineStatus === 1"
            type="text"
            style="color: #00f59b"
            ><SvgIcon
              style="margin-right: 5px; margin-left: 4px"
              name="online-new"
            ></SvgIcon
            >在线</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="deviceCount" label="实时值">
        <template slot-scope="scope">
          <div v-if="scope.row.realTimeValue">
            {{ scope.row.realTimeValue }}
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column prop="countWarningToday" label="今日报警">
        <template slot-scope="scope">
          {{ scope.row.countWarningToday }}次
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="countWarningHistory"
        label="历史报警"
      >
        <template slot-scope="scope">
          {{ scope.row.countWarningHistory }}次
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        :index="indexMethod">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table> -->
    <!-- <el-row :gutter="20">
      <el-col :span="12">
        <title-decoration-2  v-if="showLineChart" class="drawer-middle_left" title="实时数值折线图">
          <drawerBottomLeft ref="bottomLeftRef" :sensorForm="sensorForm"></drawerBottomLeft>
        </title-decoration-2>
        <title-decoration-2  v-else class="drawer-middle_left" title="实时数值折线图">
        </title-decoration-2>
      </el-col>
      <el-col :span="12">
        <title-decoration-2 class="drawer-middle_right" title="监控摄像头">
          <template #button>
            <el-button type="text" style="padding: 0px" @click="$router.push({ path: '/monitor/index' })">查看全部</el-button>
          </template>
          <drawerBottomRight ref="bottomRightRef" :enterpriseId="enterpriseId"></drawerBottomRight>
        </title-decoration-2>
      </el-col>
    </el-row> -->
  </div>
  <Reacquire
    v-else
    @onclick="getData(this.deviceFormId)"
    style="line-height: 100px"
  >
    重新获取
  </Reacquire>
</template>

<script>
// import drawerBottomLeft from './drawerBottomLeft.vue';
// import drawerBottomRight from './drawerBottomRight.vue';
export default {
  components: {
    // drawerBottomLeft,
    // drawerBottomRight
  },
  props: {
    deviceFormId: {
      type: String,
      default: () => "",
    },
    enterpriseId: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      pageflag: false,
      loading: false,
      tableData: [],
      showLineChart: false,
    };
  },
  watch: {
    deviceFormId: {
      handler(newValue) {
        if (newValue !== "") {
          // this.$nextTick(() => {
          this.getData(newValue);
          // })
        }
      },
      immediate: true,
      deep: true,
    },
  },

  created() {},
  async mounted() {
    // this.getData(this.deviceForm.id);
  },
  beforeDestroy() {},
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    // 表头样式
    tableHeaderCellStyle() {
      return {
        "background-color": "#083071 !important",
        color: "#71CDF9",
        "font-size": "14px",
        "border-bottom": "none",
        "text-align": "center",
      };
    },
    // 行样式
    rowStyle({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return {
          background: "#081843 !important",
        };
      } else {
        return {
          background: "#0e2b55 !important",
        };
      }
    },
    // 列样式
    tableCellStyle({ column, row }) {
      if (column.label === "报警") {
        if (row.alarm) {
          return {
            color: "red",
            "font-size": "14px",
            "border-bottom": "none",
            "text-align": "center",
            padding: "8px 0px",
          };
        } else {
          return {
            color: "#ddd",
            "font-size": "14px",
            "border-bottom": "none",
            "text-align": "center",
            padding: "8px 0px",
          };
        }
      } else {
        return {
          color: "#ddd",
          "font-size": "14px",
          "border-bottom": "none",
          "text-align": "center",
          padding: "8px 0px",
        };
      }
    },
    // eslint-disable-next-line no-unused-vars
    getData(id) {
      try {
        this.loading = true;
        // const res = await this.$api.screen.getParamList(id);
        let res = [
          {
            id: "6e48753852f34429a205a41e0ca87b94",
            deviceId: "fca663edd26d4e69b39ed8e75d2f3500",
            paramId: "84",
            paramName: "可燃气体浓度",
            openWarn: 0,
            thresholdValueUp: null,
            thresholdValueLow: null,
            field: "Gas",
            unit: "%LEL",
            remark: null,
            status: 2,
            isWarning: null,
            onlineStatus: 0,
            realTimeValue: null,
            countWarningToday: 0,
            countWarningHistory: 0,
          },
          {
            id: "595b298e830248f898defe790b4cbada",
            deviceId: "fca663edd26d4e69b39ed8e75d2f3500",
            paramId: "85",
            paramName: "可燃气体浓度报警",
            openWarn: 1,
            thresholdValueUp: null,
            thresholdValueLow: null,
            field: "GasAlarm",
            unit: null,
            remark: "0： 空状态  1 正常  2  低报警   3 ： 高报警",
            status: 1,
            isWarning: null,
            onlineStatus: 0,
            realTimeValue: null,
            countWarningToday: 0,
            countWarningHistory: 0,
          },
        ];
        this.loading = false;
        this.pageflag = true;
        if (res.length > 0) {
          this.$emit("returnData", res[0]);
          this.tableData = res;
          this.showLineChart = true;
        } else {
          this.$emit("returnData", "");
          this.tableData = [];
          this.showLineChart = false;
        }
      } catch {
        // 请求失败，显示重新获取
        // this.pageflag = false;
      }
    },
    // 点击某一行
    rowClick(row) {
      this.$emit("returnData", row);
      // this.$refs.bottomLeftRef.getData(row)
    },
  },
};
</script>
<style lang="scss" scoped>
.middle {
  .drawer-middle_left,
  .drawer-middle_right {
    height: 300px;
  }
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(140, 182, 222, 0.1);
}
</style>
